import React from 'react';
import { connect } from 'dva';
import { Card, Spin, Button, Timeline } from 'antd';
import moment from 'moment';
import router from 'umi/router';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';

const { Description } = DescriptionList;
@connect(({ laborcontract, loading }) => ({
  loading: loading.models.laborcontract,
  laborcontract,
  detailList: laborcontract.detailList,  // 详情数据
  remarkList: laborcontract.remarkList,  // 办理备注数据
}))
class ClientInfoDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      laborContId: '',
      activeKey: '1',
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    this.setState({
      laborContId: queryString.parse(location.search).laborContId,
      activeKey: queryString.parse(location.search).activeKey || '1',
    });
    // 获取页签字典
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['CONT_SIGN_WAY'],
    }).then(() => {
      const { laborContId } = this.state;
      this.getDetail(laborContId);
    });
  }

  // 获取详情数据
  getDetail = paramId => {
    const {
      dispatch,
      location: { pathname },
    } = this.props;
    const tempUrl = pathname.split('/detail')[0];
    if (paramId) {
      dispatch({
        type: 'laborcontract/queryLaborCont',
        payload: {
          laborContId: paramId,
        },
      })
    } else {
      router.push(`${tempUrl}/index`);
    }
  };

  render() {
    const {
      loading,
      location: { pathname },
      detailList,
      remarkList,
    } = this.props;
    const tempUrl = pathname.split('/detail')[0];
    const { activeKey } = this.state;
    return (
      <PageHeaderWrapper>
        <Spin spinning={loading}>
          <Card title={<span style={{ fontWeight: 'bolder' }}>基本信息</span>}>
            <DescriptionList>
              <Description term="姓名">
                {detailList.empBaseInfoVo && detailList.empBaseInfoVo.empName || '--'}
              </Description>
              <Description term="证件类型">
                {detailList.empBaseInfoVo && detailList.empBaseInfoVo.certTypeName || '--'}
              </Description>
              <Description term="证件号">
                {detailList.empBaseInfoVo && detailList.empBaseInfoVo.certNo || '--'}
              </Description>
              <Description term="性别">{detailList.empBaseInfoVo && detailList.empBaseInfoVo.genderName || '--'}</Description>
              <Description term="国籍">{detailList.empBaseInfoVo && detailList.empBaseInfoVo.nationName || '--'}</Description>
              <Description term="出生日期">
                {detailList.empBaseInfoVo && detailList.empBaseInfoVo.birthDate ? moment(detailList.empBaseInfoVo.birthDate).format('YYYY-MM-DD') : '--'}
              </Description>
              <Description term="电话">{detailList.empBaseInfoVo && detailList.empBaseInfoVo.mobile || '--'}</Description>
              <Description term="员工邮箱">
                {detailList.empBaseInfoVo && detailList.empBaseInfoVo.email || '--'}
              </Description>
              <Description term="所属客服">
                {detailList.empBaseInfoVo && `${detailList.empBaseInfoVo.creName}（${detailList.empBaseInfoVo.creDepName}）` || '--'}
              </Description>
              <div style={{ clear: 'both' }} />
              <div style={{ height: 1, width: '100%', background: '#eee', marginBottom: 10 }} />
              <Description term="客户名称">
                {detailList.empBaseInfoVo && detailList.empBaseInfoVo.custName || '--'}
              </Description>
              <Description term="服务类型">
                {detailList.empBaseInfoVo && detailList.empBaseInfoVo.contSerTypeName || '--'}
              </Description>
              <Description term="入职日期">
                {detailList.empBaseInfoVo && detailList.empBaseInfoVo.entryDate ? moment(detailList.empBaseInfoVo.entryDate).format('YYYY-MM-DD') : '--'}
              </Description>
              <Description term="派单时间">
                {detailList.empBaseInfoVo && detailList.empBaseInfoVo.creTime ? moment(detailList.empBaseInfoVo.creTime).format('YYYY-MM-DD HH:mm') : '--'}
              </Description>
            </DescriptionList>
          </Card>
          <Card title={<span style={{ fontWeight: 'bolder' }}>劳动合同信息</span>}>
            <DescriptionList>
              <Description term="合同编号">
                {detailList.responseLaborCont && detailList.responseLaborCont.contNo || '--'}
              </Description>
              <Description term="合同签署方">
                {detailList.responseLaborCont && detailList.responseLaborCont.contSignWayName || '--'}
              </Description>
              <Description term="合同类型">
                {detailList.responseLaborCont && detailList.responseLaborCont.contTypeName || '--'}
              </Description>
              <Description term="是否已签订电子劳动合同">
                {detailList.responseLaborCont && detailList.responseLaborCont.electrSignFlag || '--'}
              </Description>
              <Description term="有无固定期限">
                {detailList.responseLaborCont && detailList.responseLaborCont.fixedDeadlnFlagName || '--'}
              </Description>
              <Description term="合同开始日期">
                {detailList.responseLaborCont && detailList.responseLaborCont.contBeginDate ? moment(detailList.responseLaborCont.contBeginDate).format('YYYY-MM-DD') : '--'}
              </Description>
              <Description term="合同结束日期">
                {detailList.responseLaborCont && detailList.responseLaborCont.contEndDate ? moment(detailList.responseLaborCont.contEndDate).format('YYYY-MM-DD') : '--'}
              </Description>
              <Description term="有无试用期">
                {detailList.responseLaborCont && detailList.responseLaborCont.probtnFlagName || '--'}
              </Description>
              {detailList.responseLaborCont && detailList.responseLaborCont.probtnFlagName === '有' ? (
                <Description term="试用期开始日期">
                  {detailList.responseLaborCont && detailList.responseLaborCont.probtnBeginDate ? moment(detailList.responseLaborCont.probtnBeginDate).format('YYYY-MM-DD') : '--'}
                </Description>
              ) : (
                <div />
              )}
              {detailList.responseLaborCont && detailList.responseLaborCont.probtnFlagName === '有' ? (
                <Description term="试用期结束日期">
                  {detailList.responseLaborCont && detailList.responseLaborCont.probtnEndDate ? moment(detailList.responseLaborCont.probtnEndDate).format('YYYY-MM-DD') : '--'}
                </Description>
              ) : (
                <div />
              )}
              <Description term="合同期劳动报酬">
                {detailList.responseLaborCont && detailList.responseLaborCont.contWage || '--'}
              </Description>
              {detailList.responseLaborCont && detailList.responseLaborCont.probtnFlagName === '有' ? (
                <Description term="试用期劳动报酬">
                  {detailList.responseLaborCont && detailList.responseLaborCont.probtnWage || '--'}
                </Description>
              ) : (
                <div />
              )}
              <Description term="工时">
                {detailList.responseLaborCont && detailList.responseLaborCont.laborHourName || '--'}
              </Description>
              <Description term="岗位">
                {detailList.responseLaborCont && detailList.responseLaborCont.wkJob || '--'}
              </Description>
              <Description term="工作地点">
                {detailList.responseLaborCont && detailList.responseLaborCont.wkLoc || '--'}
              </Description>
              <Description term="工作内容">
                {detailList.responseLaborCont && detailList.responseLaborCont.wkContent || '--'}
              </Description>
              <Description term="是否做入职体检">
                {detailList.responseLaborCont && detailList.responseLaborCont.entryMedExamFlagName || '--'}
              </Description>
              <Description term="合同状态">
                {detailList.responseLaborCont && detailList.responseLaborCont.contStateName || '--'}
              </Description>
              <Description term="签署方式">
                {detailList.responseLaborCont && detailList.responseLaborCont.signWayName || '--'}
              </Description>
              <Description term="办理人">
                {detailList.responseLaborCont && detailList.responseLaborCont.tskName || '--'}
              </Description>
              <Description term="签订时间">
                {detailList.responseLaborCont && detailList.responseLaborCont.signDate ? moment(detailList.responseLaborCont.signDate).format('YYYY-MM-DD HH:mm') : '--'}
              </Description>
              <Description term="发放对象">
                {detailList.responseLaborCont && detailList.responseLaborCont.issObjName || '--'}
              </Description>
              <Description term="发放方式">
                {detailList.responseLaborCont && detailList.responseLaborCont.issWayName || '--'}
              </Description>
              <Description term="快递单号">
                {detailList.responseLaborCont && detailList.responseLaborCont.exprsNo || '--'}
              </Description>
            </DescriptionList>
          </Card>
          <Card title={<span style={{ fontWeight: 'bolder' }}>办理备注</span>}>
            {remarkList && remarkList.length ? (
              <Timeline style={{ marginLeft: 95 }}>
                {remarkList.map(item => (
                  <Timeline.Item>
                    <p>
                      {moment(item.operTime).format('YYYY-MM-DD HH:mm')}
                      <span style={{ marginLeft: 20 }}>{item.operName}</span>
                    </p>
                    <p>{item.content}</p>
                  </Timeline.Item>
                ))}
              </Timeline>
            ) : (
              '暂无数据'
            )}
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button
              onClick={() =>
                activeKey === '1'
                  ? router.goBack()
                  : router.push(`${tempUrl}/index?activeKey=${activeKey}`)
              }
            >
              返回
            </Button>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}
export default ClientInfoDetails;
